<%--
  Created by IntelliJ IDEA.
  User: Pro
  Date: 2018-06-14
  Time: 19:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="${pageContext.request.contextPath}/">
    <title>文章页</title>
    <link rel="shortcut icon" href="static/assets/css/images/favicon.png">
    <link rel="stylesheet" href="static/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/assets/css/font-awesome.min.css">

    <link rel="stylesheet" href="static/assets/css/vue_page.css">
    <style>

        p img {
            display: block;
            margin: 0 auto;
        }

        .body {
            background-color: #e5e5e5;
        }

        #paper {
            font-family: 微软雅黑;
            line-height: 2em; /*字行距*/
            font-size: 1.2em;
            border-color: black;
            background-color: white;
            border-radius: 1em;
            margin: 2% 5% 2% 5%;
            padding: 2% 5% 2% 5%;

        }

        .img-fluid {
            margin: 4% 0 4% 0;
            padding-left: 10%;
            width: 80%;
            padding-right: 10%;
        }

        .center {
            margin-top: 10px;

        }

        #title {
            font-size: 2em;
        }

        .time_author {
            display: inline;
        }

        #time, #author {
            padding-left: 10%;
        }

        .indent {
            text-indent: 25px; /*字缩进（前留空）*/
        }

        #videoplay {
            margin-top: -3%;
            margin-left: 95%;

        }
    </style>
    <script src="static/assets/js/vue.js"></script>

</head>
<body class="body">
<div id="paper">
    <button type="button" class="btn btn-outline-secondary:hover rounded-circle" onclick="javascript:history.back(-1);">
        <a class="fa fa-arrow-left " style=" text-decoration: none;color:#ffffff"href="javascript:void(0);"></a></button>
    <button type="button" id="videoplay" class="btn btn-outline-secondary:hover rounded-circle" onclick="window.open('movie?url=${article.link}','_blank')">
        <a class="fa fa-play " href="javascript:void(0)" style="text-decoration: none; color:#ffffff"></a>
    </button>
    <div class="text-center" id="title">${article.title}
    </div>

    <br>

    <div class="time_author">

        <p id="time"></p>
        <p id="author">作者：${article.author}</p>
    </div>
    <br>
    <%--<div class="indent" id="preview" placeholder="markdown语言">--%>
    <%--${article.content}--%>
    <%--</div>--%>
    <article>
        <div id="preview" class=" indent col-12" style="text-align: left;">
            <textarea style="display:none;" placeholder="markdown语言">${article.content}</textarea>
        </div>
    </article>
    <%--评论--%>
    <div class="col-12">

        <h4>评论区</h4>
        <hr style="border-bottom: 1px double #0275d8">
        <div class="form-group">
            <label for="content">写下你的看法吧</label>
            <textarea class="form-control" id="content" rows="3" name="content"></textarea>
        </div>
        <button class="btn btn-primary" id="commentMovie" onclick="doUpload()">评论</button>
        <hr style="border: 1px double">
        <h5>网友留言</h5>
        <div id="vue-comment">
            <div class="card mb-3" v-for="item in array">
                <div class="card-block">
                    <p style="display: none"></p>
                    <p style="display:none;" name="articleId">{{item.articleId}}</p>
                    <h5 class="card-title">用户名：{{item.username}}</h5>
                    <p class="card-text" name="content">
                        {{item.content}}
                    </p>
                </div>
            </div>
        </div>
    </div>
    <%--评论--%>

    <!--分页-->
    <div class="page-bar col-12" v-show="show" style=" display: none; padding-left: 300px"id="vuepage">
        <ul >
            <li v-if="cur>1"><a v-on:click="pageClick(),updownClick(cur-1)">上一页</a></li>
            <li v-if="cur==1"><a class="banclick">上一页</a></li>
            <li v-for="index in indexs" v-bind:class="{ 'active': cur == index}">
                <a v-on:click="btnClick(index)">{{ index }}</a>
            </li>
            <li v-if="cur!=all"><a v-on:click="pageClick(),updownClick(cur+1)">下一页</a></li>
            <li v-if="cur == all"><a class="banclick">下一页</a></li>
            <li><a>共<i>{{all}}</i>页</a></li>
        </ul>
    </div>
    <!--分页-->
    <div class="row" style="padding-top: 60px; clear: both;">
        <div class="col-md-12 text-center"><p><small>&copy; 滑稽</small> </p></div>
    </div>

    <%--下面是JS!!!!!!下面是JS!!!!!!下面是JS!!!!!!--%>

    <%--markdown全家桶--%>
    <script src="static/assets/js/jquery.min.js"></script>
    <script src="static/assets/markdown/lib/marked.min.js"></script>
    <script src="static/assets/markdown/lib/prettify.min.js"></script>
    <script src="static/assets/markdown/lib/raphael.min.js"></script>
    <script src="static/assets/markdown/lib/underscore.min.js"></script>
    <script src="static/assets/markdown/lib/sequence-diagram.min.js"></script>
    <script src="static/assets/markdown/lib/flowchart.min.js"></script>
    <script src="static/assets/markdown/lib/jquery.flowchart.min.js"></script>
    <script src="static/assets/markdown/js/editormd.js"></script>
    <script>
        editormd.markdownToHTML("preview", {
            htmlDecode: "style,script,iframe",
            emoji: true,
            taskList: true,
            tex: true,  // 默认不解析
            flowChart: true,  // 默认不解析
            sequenceDiagram: true  // 默认不解析
        });
    </script>
    <%--markdown全家桶--%>

    <script src="static/assets/js/vue_page.js"></script>
    <%--获取评论--%>
    <script>

        var idnum =${article.id};
        var url_1 = "api/article/";
        var url_2 = "/comment?currentPage=";
        var commenturl = url_1 + idnum + url_2 + 1;
        var get_comment;
        $.ajax({
            url: commenturl,
            type: "GET",
            success: function (data) {//存入data

                get_comment = new Vue({//构造函数
                    el: '#vue-comment',//挂载点
                    data: {
                        array: data.content
                    }
                });

                page = new Vue({//分页构造函数
                    el: '.page-bar',//挂载点
                    data: {
                        show: true,
                        all: Math.ceil(data.count / 3),//总页数,上取整
                        num:data.page,// 当前页数
                        cur: data.page,// 当前页数
                        total: data.count,//数据总数
                        display: data.size//每页显示个数,
                    },
                    watch: {
                        cur: function (oldValue, newValue) {
                            console.log(arguments);
                        },

                    },
                    methods: {

                        updownClick:function(data){//上下页点击事件
                            if (data != this.cur) {
                                this.cur = data;
                                num=this.cur;
                                getdata();
                            }
                        },

                        btnClick: function (data) {//页码点击事件
                            if (data != this.cur) {
                                this.cur = data;
                                num=this.cur;
                                getdata();
                            }
                        },
                        pageClick: function () {

                            console.log('现在在' + this.cur + '页');
                        }
                    },
                    computed: {
                        indexs: function () {
                            var left = 1;//左边默认1
                            var right = this.all;//右边默认为all总页数
                            var ar = []
                            if (this.all >= 5) {//如果总页数大于5，显示12345
                                if (this.cur > 3 && this.cur < this.all - 2) {//当前点击的页数大于3并且向左减2页小于总页数
                                    left = this.cur - 2//如果大于3，比如4，左边就为4-2=2
                                    right = this.cur + 2//同上，右边4+2=6，此时显示23456
                                } else {
                                    if (this.cur <= 3) {//小于等于3
                                        left = 1
                                        right = 5
                                    } else {//大于3
                                        right = this.all
                                        left = this.all - 4
                                    }
                                }
                            }

                            while (left <= right) {//显示页数
                                ar.push(left)
                                left++
                            }
                            return ar
                        }
                    }
                })
            },
            error: function (data) {
                console.log("评论数据获取失败（滑稽")
            }
        });

        function getdata() {

            $.ajax({
                url: url_1 + idnum + url_2 + num,
                type: 'GET',
                success: function (data) {//存入data
                    get_comment.$data.array = data.content;
                    console.log(data)
                },
                error: function (data) {
                    console.log(data)
                }

            })
        }

        //发布新评论后调用
        function getnewdata() {
var getnewdataid=${article.id};
            $.ajax({
                url: url_1 +getnewdataid+ url_2 + 1,
                type: 'GET',
                success: function (data) {//存入data
                    get_comment.$data.array = data.content;
                    console.log(data)
                },
                error: function (data) {
                    console.log(data)
                }

            })
        }


    </script>
    <%--获取评论--%>



    <%--上传评论--%>
    <script>

        function doUpload() {
            $.ajax({
                url: "api/user/comment" ,
                type: "POST",
                data: {
                    articleId:${article.id},
                    content: $("#content")["0"].value,
                },
                dataType:'JSON',
                success: function (data) {
                    if (data === 1) {
                        alert("提交成功");
                        // location.reload();//暴力刷新法
                        getnewdata();//文明刷新法
                    }
                },
                error: function (data) {

                    alert('请先登录再评论')
                }
            })
        }
    </script>
    <%--上传评论--%>

    <%--时间格式转换--%>
    <%--原时间格式为：Sun Jun 24 22:08:00 CST 2018--%>
    <script>
        var time = "${article.time}";
        var aStrings = time.split(" ");

        var day = aStrings[2];
        var daytime = aStrings[3];
        var year = aStrings[5];

        var a = document.getElementById("time");

        if (aStrings[1] == ("Jan")) {
            aStrings[1] = "1";
        }
        if (aStrings[1] == ("Feb")) {
            aStrings[1] = "2";
        }
        if (aStrings[1] == ("Mar")) {
            aStrings[1] = "3";
        }
        if (aStrings[1] == ("Apr")) {
            aStrings[1] = "4";
        }
        if (aStrings[1] == ("May")) {
            aStrings[1] = "5";
        }
        if (aStrings[1] == ("Jun")) {
            aStrings[1] = "6";
        }
        if (aStrings[1] == ("Jul")) {
            aStrings[1] = "7";
        }
        if (aStrings[1] == ("Aug")) {
            aStrings[1] = "8";
        }
        if (aStrings[1] == ("Sep")) {
            aStrings[1] = "9";
        }
        if (aStrings[1] == ("Oct")) {
            aStrings[1] = "10";
        }
        if (aStrings[1] == ("Nov")) {
            aStrings[1] = "11";
        }
        if (aStrings[1] == ("Dec")) {
            aStrings[1] = "12";
        }
        var month = aStrings[1];
        var readlytime = year + '年' + month + '月' + day + '日' + daytime;
        a.innerText = "发布时间：" + readlytime;
    </script>
    <%--时间格式转换--%>




</body>


</html>